{% extends 'layout.html' %}
{% block title%}{{title}}{% endblock %}
{% block content %}
<div class="hbox hbox-auto-xs hbox-auto-sm">
    <!-- main -->
    <div class="col wrapper-lg">
        <h3 class="font-thin m-t-n-xs m-b">推荐文档</h3>
        <div class="row row-sm">

		{% for rd in recommendData %}
            <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2-4">
                <div class="item">
                    <div class="pos-rlt">
                        <a href="/doc/{{rd._id.toString()}}">
                            <div class="item-overlay bg-black-opacity r r-2x r r-2x">
                                    <div class="center text-center m-t-n w-full">
                                        <i class="fa fa-2x fa-link text-white"></i>
                                    </div>
                            </div>
                        </a>
                        <a><img src="{% if rd.cover %}{{rd.cover}}{% else %}/img/doccover.png{% endif %}" class="img-full r r-2x"></a>
                    </div>

                    <div class="padder-v">
                        <a ui-sref="music.detail" class="text-ellipsis" href="#/music/detail">{{rd.title}}</a>
                        <a ui-sref="music.detail" class="text-ellipsis text-xs text-muted" href="#/music/detail">{{rd.name}}</a>
                    </div>

                </div>
            </div>
		{%endfor%}
        </div>

        <div class="row">
            <div class="col-md-7">
                <h3 class="font-thin">最新文档</h3>
                <div class="row row-sm">

                {% for docNew in docsNew%}
                    <div class="col-xs-6 col-sm-3">
                        <div class="item">


                            <div class="pos-rlt">
                                <a href="/doc/{{'' + docNew._id}}">
                                    <div class="item-overlay bg-black-opacity r r-2x">
                                        <div class="center text-center m-t-n w-full">
                                            <i class="fa fa-2x fa-link text-white"></i>
                                        </div>
                                    </div>
                                </a>
                                <img src="{% if docNew.cover %}{{docNew.cover}}{% else %}/img/doccover.png{% endif %}" class="img-full r r-2x">
                            </div>
                            <div class="padder-v">
                                <a class="text-ellipsis" href="#/music/detail">{{docNew.title}}</a>
                                <a class="text-ellipsis text-xs text-muted" href="#/music/detail">{{docNew.name}}</a>
                            </div>
                        </div>
                    </div>
                {% endfor %}


                </div>
            </div>




            <div class="col-md-5">
                <h3 class="font-thin">热门文档</h3>
                <div class="list-group bg-white list-group-lg no-bg auto">
                    {% for key, val in  hotData%}
                        <a class="list-group-item clearfix" href="/doc/{{val._id.toString()}}">
                            <span class="pull-right h2 text-muted m-l">{{key + 1}}</span>
                            <span class="pull-left thumb-sm avatar m-r">
                              <img src="{{val.avatar}}" class="r">
                            </span>
                            <span class="clear">
                              <span>{{val.title}}</span>
                              <small class="text-muted clear text-ellipsis">{{val.name}}</small>
                            </span>
                        </a>
                    {%endfor%}
                </div>
            </div>
        </div>
    </div>
    <!-- / main -->
    <!-- right col -->
    <div class="col w-md bg-light dker b-l bg-auto no-border-xs">
        <div class="wrapper-md">
            <div class="m-b-sm text-md">开发者排名</div>
            <ul class="list-group no-bg no-borders pull-in">
            {%for dev in developer %}
                <li class="list-group-item">
                    <a herf="/user/{{dev.nickname}}" class="pull-left thumb-sm m-r">
                        <img src="{{dev.avatar}}" alt="{{dev.avatar}}" class="r">
                    </a>
                    <div class="clear">
                        <div><a href="/user/{{dev.nickname}}">{{dev.nickname}}</a></div>
                        <small class="text-muted">{{dev.docsTotal}}篇文章</small>
                    </div>
                </li>
            {%endfor%}
            </ul>
            <!--<div class="text-center">-->
                <!--<a href="" class="btn btn-sm btn-info padder-md m-b">More</a>-->
            <!--</div>-->
        </div>
    </div>
    <!-- / right col -->
</div>
{% endblock%}

